<template>
  <el-container>
    <!--  头部 start  -->
    <el-header height="42px">
      <!--   功能按钮组 start   -->
      <span class="ik-list-title">
        <span class="svg-container ik-list-icon">
          <svg-icon icon-class="database" />
        </span>
        <span>数据列表</span>
      </span>
      <!--   功能按钮组 end   -->
      <!--   列表页菜单 start   -->
      <el-button-group class="ik-list-menu">
        <el-button class="ik-list-menu-btn" size="medium" @click="listCreateBtn">新增</el-button>
        <el-button class="ik-list-menu-btn" size="medium" @click="listUpdateBtn">修改</el-button>
        <el-button class="ik-list-menu-btn" size="medium" @click="listDetailsBtn">详情</el-button>
        <el-button class="ik-list-menu-btn" size="medium" @click="listDeleteBtn">删除</el-button>
      </el-button-group>
      <!--   列表页菜单 end   -->
    </el-header>
    <!--  头部 end  -->
    <el-main>
      <!-- 查询区 -->
      <div class="querybg">
        <el-collapse
          v-model="searcherActive"
          class="ik-list-searcher"
          accordion
        >
          <el-collapse-item class="ik-list-searcher-item" title="" name="1">
            <!-- 标题栏 -->
            <template #title>
              <div class="ik-list-searcher-item-titles">
                <span class="svg-container ik-list-icon">
                  <svg-icon icon-class="search" />
                </span>
                查询条件
              </div>
            </template>
            <!-- 查询菜单 -->
            <el-form
              id="ik-info-head"
              v-model="searcher"
              class="ik-info-head"
              :inline="true"
              label-width="120px"
              :disabled="false"
            >
              <el-row v-for="row in searchItems" :key="row.rowIndex">
                <el-col v-for="(col,index) in row.items" :key="index" :span="col.span">
                  <ik-form-select
                    v-if="col.type==='select'"
                    :ref="`input_${col.code}`"
                    v-model="searcher[col.code]"
                    :code="col.code"
                    :name="col.name"
                    v-bind="col.config"
                  />
                  <ik-form-group-search
                    v-else-if="col.type==='group'"
                    :ref="`input_${col.code}`"
                    v-model="searcher[col.code]"
                    :code="col.code"
                    :name="col.name"
                    v-bind="col.config"
                  />
                  <ik-form-date
                    v-else-if="col.type==='date'"
                    :ref="`input_${col.code}`"
                    v-model="searcher[col.code]"
                    :code="col.code"
                    :name="col.name"
                    v-bind="col.config"
                  />
                  <ik-form-time
                    v-else-if="col.type==='time'"
                    :ref="`input_${col.code}`"
                    v-model="searcher[col.code]"
                    :code="col.code"
                    :name="col.name"
                    v-bind="col.config"
                  />
                  <ik-form-datetime
                    v-else-if="col.type==='datetime'"
                    :ref="`input_${col.code}`"
                    v-model="searcher[col.code]"
                    :code="col.code"
                    :name="col.name"
                    v-bind="col.config"
                  />
                  <ik-form-id
                    v-else-if="col.type==='id'"
                    :ref="`input_${col.code}`"
                    v-model="searcher[col.code]"
                    :code="col.code"
                    :name="col.name"
                    v-bind="col.config"
                  />
                  <ik-form-text
                    v-else
                    :ref="`input_${col.code}`"
                    v-model="searcher[col.code]"
                    :code="col.code"
                    :name="col.name"
                    v-bind="col.config"
                  />
                </el-col>
              </el-row>
            </el-form>
            <!-- 操作按钮 -->
            <div class="query-class">
              <div class="query-btn-warp">
                <el-button type="primary" size="small" @click="searchBtn">查询</el-button>
                <el-button type="primary" size="small" @click="resetBtn">重置</el-button>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <!-- 数据表 -->
      <el-table
        ref="table"
        v-loading="listLoading"
        :data="tableData"
        element-loading-text="加载中..."
        :stripe="true"
        :border="true"
        :fit="true"
        class="ik-list-table"
        height="calc(100% - 50px)"
        :header-row-class-name="'ik-list-table-header-row'"
        :header-cell-class-name="'ik-list-table-header-cell'"
        :row-class-name="'ik-list-table-body-row'"
        :cell-class-name="'ik-list-table-body-cell'"
        :highlight-current-row="true"
        @row-click="rowClick"
      >
        <template v-for="(column,index) in columns">
          <ik-column-id
            v-if="column.type==='id'"
            :key="index"
            :code="column.code"
            :name="column.name"
            v-bind="column.config"
          />
          <ik-column-image-oss
            v-else-if="column.type==='oss'"
            :key="index"
            :code="column.code"
            :name="column.name"
            v-bind="column.config"
          />
          <ik-column-number
            v-else-if="column.type==='number'"
            :key="index"
            :code="column.code"
            :name="column.name"
            v-bind="column.config"
          />
          <ik-column-datetime
            v-else-if="column.type==='datetime'"
            :key="index"
            :code="column.code"
            :name="column.name"
            v-bind="column.config"
          />
          <ik-column-group
            v-else-if="column.type==='group'"
            :key="index"
            :code="column.code"
            :data-down="listLoading"
            :name="column.name"
            v-bind="column.config"
          />
          <ik-column-video-oss
            v-else-if="column.type==='video'"
            :key="index"
            :code="column.code"
            key-field="key"
            value-field="value"
            :name="column.name"
            v-bind="column.config"
          />
          <ik-column-time
            v-else-if="column.type==='time'"
            :key="index"
            :code="column.code"
            :name="column.name"
            v-bind="column.config"
          />
          <ik-column-select
            v-else-if="column.type==='select'"
            :key="index"
            :code="column.code"
            key-field="key"
            value-field="value"
            :name="column.name"
            v-bind="column.config"
          />
          <ik-column-editor
            v-else-if="column.type==='editor'"
            :key="index"
            :code="column.code"
            :name="column.name"
            v-bind="column.config"
          />
          <ik-column-text
            v-else
            :key="index"
            :code="column.code"
            :name="column.name"
            v-bind="column.config"
          />
        </template>
      </el-table>
    </el-main>
    <!-- 分页组件 -->
    <el-footer height="40px">
      <ik-pagination
        ref="ik_list_pagination"
        :page-no="pagination.pageNo"
        :page-size="pagination.pageSize"
        :total-count="pagination.totalCount"
        @pageChangeMethod="pageChange"
      />
    </el-footer>
  </el-container>
</template>

<script>
import { findPage, remove } from '@/api/ik/data/dataApi'

export default {
  props: {
    searchItems: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    },
    bgPath: {
      type: String,
      required: true
    },
    webPath: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      listLoading: false,
      // ===== ===== ===== ===== 列表页属性 ===== ===== ===== =====
      // 查询器是否激活
      searcherActive: "0",
      searcher: {},
      // 列表页数据
      tableData: [],
      // 当前选中行
      activeRow: {},
      // 分页器
      pagination: {
        pageNo: 1,
        pageSize: 20,
        totalCount: 2
      },
      // ===== ===== ===== ===== 信息页属性 ===== ===== ===== =====
      // 当前数据id
      id: 0,
      // 子表清单
      bodyMap: []
    }
  },
  mounted() {
    this.find()
  },
  methods: {
    /**
     * 新增按钮
     */
    listCreateBtn() {
      this.$router.push({ path: '/business/manager/' + this.webPath + '/info/add' })
    },
    /**
     * 编辑按钮
     */
    listUpdateBtn() {
      // 是否选择行
      if (this.activeRow.id === undefined) {
        this.$message.warning('请选择需要编辑的行!')
      } else {
        this.$router.push({
          path: '/business/manager/' + this.webPath + '/info/edit',
          query: { id: this.activeRow.id }
        })
      }
    },
    /**
     * 列表页详情按钮点击
     */
    listDetailsBtn() {
      // 是否选择行
      if (this.activeRow.id === undefined) {
        this.$message.warning('请选择需要编辑的行!')
      } else {
        // 修改为详情模式
        this.$router.push({
          path: '/business/manager/' + this.webPath + '/info/details',
          query: { id: this.activeRow.id }
        })
      }
    },
    /**
     * 列表页删除按钮点击
     */
    listDeleteBtn() {
      // 是否选择行
      if (this.activeRow.id === undefined) {
        this.$message.warning('请选择需要删除的行!')
      } else {
        // 问询是否删除
        this.$confirm('删除ID为' + this.activeRow.id + '的数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delete(this.activeRow.id)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    /**
     * 查询
     */
    searchBtn() {
      this.find()
    },
    /**
     * 重置
     */
    resetBtn() {
      this.searcher = {}
      this.find()
    },
    /**
     * 分页器数据变更
     * @param pageNo
     * @param pageSize
     */
    pageChange(pageNo, pageSize) {
      // 修改分页数据
      this.pagination.pageNo = pageNo
      this.pagination.pageSize = pageSize
      // 刷新数据
      this.find()
    },
    /**
     * 行点击事件
     * @param row
     */
    rowClick(row) {
      this.activeRow = row
    },
    /**
     * 删除数据
     * @param id
     */
    delete(id) {
      remove(this.bgPath, id).then(() => {
        this.$message.warning('数据已删除!')
        this.find()
      })
    },
    /**
     * 查询数据
     */
    find() {
      this.listLoading = true
      // 获取树组件数据
      findPage(this.bgPath, this.searcher, this.pagination.pageSize, this.pagination.pageNo)
        .then(response => {
          // 设置表格数据
          this.tableData = response.data.list
          // 设置分页器
          this.pagination.totalCount = response.data.totalCount
        })
        .finally(() => {
          this.listLoading = false
        })
    }
  }
}
</script>

<style scoped lang="scss">

@import "~@/styles/listinfo";

.data-directory-tabs-info {
  height: calc(100% - 60px);
}

.data-directory-tabs-info .el-tabs__content {
  height: calc(100% - 53px);
  overflow: auto;
  min-height: 350px;
}
</style>
